<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <style>
        .box {
            width: 600px;
            margin: auto;
            border: 1px solid black;
            text-align: center;
            padding: 20px;
            padding-bottom: 30px;
            box-sizing: border-box;
            margin-top: 70px;
            border-radius: 7px;
            background-color: rgba(172, 202, 235, 0.486);
        }

        img {
            width: 200px;
            height: 180px;
        }

        span {
            font-size: 20px;
            font-weight: 500;
        }

        p {
            font-weight: 600;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>商品详情</h1>
        <div class="son">
            <span></span>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        var goodsDetail = JSON.parse(localStorage.getItem('goodsDetail'))
        // console.log(goodsDetail);
        $('.son').html(`
            <p><img src="${goodsDetail.img}" alt="图片暂缺"></p>
            <p><span>商品ID</span>：${goodsDetail.id}</p>
            <p><span>商品名称：</span>${goodsDetail.goods_name}</p>
            <p><span>商品价格：</span>${goodsDetail.price}</p>
            <p><span>库存：</span>${goodsDetail.stock}</p>
            <p><span>是否上架</span>：${goodsDetail.status == 1 ? '上架' : '下架'}</p>
            <p><span>已售：</span>${goodsDetail.sold}</p>
            `)
    </script>
</body>

</html>